
<template>
	<view class="index_class">
		<view style="background-color: #FFEEEB;padding: 14upx 20upx;">
			<text style="color: #C1361E;font-size: 24upx;">请绑定本人账户的银行卡</text>
		</view>
		<view class="edit-address" style="padding:0;">
			<form action="" class="new_from" style="display: block;">
				<div class="form_list">
					<span>姓名</span>
					<input type="text" v-model="addresinfo.name" placeholder="请输入您的姓名">
				</div>
				
				<div class="form_list">
					<span>身份证号</span>
					<input type="string" maxlength="18" v-model="addresinfo.cert_id" placeholder="请输入您的身份证号">
				</div>
				<!-- <div class="form_list">
					<span>身份证类型</span>
					<view style="font-size: 30upx;">
						<radio-group @change="CertType" style="margin-right: 0;">
							<label class="radio">
								<radio value="1" style="transform: scale(0.7);" :checked="certCq==false" color="#FA3F3F"/>长期有效
							</label>
							<label class="radio">
								<radio value="0" style="transform: scale(0.7);" :checked="certCq==true" color="#FA3F3F"/>非长期有效
							</label>
						</radio-group>
					</view>
					
				</div> -->
				<!-- <div class="form_list">
					<span>有效起始日</span>
					<input type="string" v-model="addresinfo.cert_begin_date" :placeholder="'20200526'">
				</div>
				<div class="form_list" v-if="certCq">
					<span>有效到期日</span>
					<input type="string" v-model="addresinfo.cert_end_date" :placeholder="'20300526'">
				</div> -->
				<div class="form_list">
					<span>银行卡号</span>
					<input type="string" v-model="addresinfo.card_number" placeholder="请输入您的银行卡号">
				</div>
				<div class="form_list">
					<span>银行名称</span>
					<!-- <input type="string" v-model="addresinfo.bank_name" placeholder="请输入您的银行名称"> -->
					<div style="">
						<picker @change="bindPickerChange" range-key="bank_name" :value="bankindex" :range="bankarray">
							<view style="width: 500rpx;text-align: right;">{{bankarray[bankindex]['bank_name']}}</view>
						</picker>
					</div>
				</div>
				<view style="text-align: right;font-size: 26upx;color: #C1361E;margin-bottom: 20upx;padding-right: 30upx;">
					<text v-if="xinyongShow">该卡单笔限额{{bankarray[bankindex]['xyk_money_max']}}元，日限额{{bankarray[bankindex]['xyk_day_max']}}元</text>
					<text v-else>该卡单笔限额{{bankarray[bankindex]['jjk_money_max']}}元，日限额{{bankarray[bankindex]['jjk_day_max']}}元</text>
				</view>
				<!-- <div class="form_list" v-if="!xinyongShow">
					<span>开户地址</span>
					
					<uni-data-picker :localdata="items" :border="false" :placeholder="regiondata || '请选择省市区'" @change="regionchange"></uni-data-picker>
				
					<input type="text" disabled="true" v-model="addresinfo.address" placeholder="请选择您的开户地址">
				</div> -->
				<!-- 
				<div class="form_list">
					<span>支行名称</span>
					<input type="text" v-model="addresinfo.branch_name" placeholder="请输入正确的支行名称">
				</div> -->
				<div class="form_list">
					<span>卡片类型</span>
					<view style="font-size: 30upx;">
						<radio-group @change="radioCardType" style="margin-right: 0;">
							<label class="radio">
								<radio value="0" style="transform: scale(0.7);" :checked="xinyongShow==false" color="#FA3F3F"/>储蓄卡
							</label>
							<label class="radio">
								<radio value="1" style="transform: scale(0.7);" :checked="xinyongShow==true" color="#FA3F3F"/>信用卡
							</label>
						</radio-group>
					</view>
					
				</div>
				<div class="form_list" v-if="xinyongShow">
					<span>信用卡验证码</span>
					<input type="string" v-model="addresinfo.vip_code" placeholder="银行卡背面签名条末三位">
				</div>
				<div class="form_list" v-if="xinyongShow">
					<span>信用卡有效期</span>
					<input type="string" v-model="addresinfo.expiration" placeholder="信用卡有效期 正面如:0127">
				</div>
				<div class="form_list">
					<span>银行预留手机号</span>
					<input type="string" maxlength="11" v-model="addresinfo.telephone" placeholder="请输入您的银行预留手机号">
				</div>
				<div class="form_list">
					<span>验证码</span>
					<input type="text" v-model="addresinfo.code" placeholder="请输入短信验证码">
					<view style="width: 2upx;height: 30upx;background-color: #999999;margin-left: 10upx;"></view>
					<view v-if="codeShow" type="success"  mode="dark" color="#999" bg-color="rgba(0,0,0,0)"
						style="width: 190upx;line-height: 50upx;height: 50upx;  text-align: center;padding: 0upx;font-size: 26upx;">{{seconds}}s</view>
					<view v-else type="success" @click="presentCode" mode="dark" color="#F64934" bg-color="rgba(0,0,0,0)"
						style="width: 190upx;line-height: 50upx;height: 50upx;  text-align: center;padding:0upx;font-size: 26upx;">点击发送</view>

				</div>
			</form>
			<view class="add_btn">
				<button class="cash_btn" @click="Newbank">确定</button>
			</view>
		</view>
		<!-- 信用卡有效期选择 -->
		<!-- <u-picker mode="time" v-model="show" :params="params" @cancel="timeCannel" @confirm="timeConfirm"></u-picker> -->
		<!-- 银行卡类型选择 -->

	</view>
</template>

<script>
	var app = getApp();
	export default {

		data() {
			return {
				timer: null,
				addType: null, //1跳回钱包页2.跳入待付款
				// 信用卡时间需要绑定  
				params: {
					year: true,
					month: true,
				},
				show: false,
				bankarray:[{bank_name:'中国工商银行'}],
				bankindex:0,
				status: null,
				xinyongShow: false,
				card_type: '储蓄卡',
				apply_id: '',
				submitShow: true,
				codeShow: false,
				boxShow: true,
				certCq:false,
				tips: '',
				// refCode: null,
				seconds: 59,
				member_id: '',
				addresinfo: {
					name: '',
					telephone: '',
					cert_id: '',
					card_number: '',
					bank_name: '中国工商银行',
					address: '湖北',
					subbranch: '',
					province: '湖北', //省
					city: '武汉',
					area: '',
					branch_name: '', //不参与校验，写默认值即可
					card_type: '',
					code: '',
					token_no: '',
					expiration: '',
					vip_code: '',
					member_type:'2',
					cert_validity_type:0,
					cert_begin_date:'20100506',
					cert_end_date:'20300506',
					code:'',
					trans_id:'',
					order_id:'',
					order_date:''
					
				},
				cityPickerValueDefault: [0, 0, 1],
				regiondata: '',
				items:""
			}
		},
		onLoad(option) {
// this.addType = option.addtype
			// this.bankName=this.$route.params.bankName;
			// console.log(this.$route.params.bankName);
			var that = this;
			this.id = option.selectBankname;
			this.xinyongShow = option.bankType == 1?true:false;
			app.get('ApiIndex/getDgBankList',{}, function (res) {
				that.bankarray = res.data;
				if(that.id){
					that.bankarray.forEach((e,i)=>{
						if(e.id == that.id){
							that.bankindex = i;
							that.addresinfo.bank_name = e.bank_name
						}
					})
					
				}else{
					that.addresinfo.bank_name = that.bankarray[0]['bank_name']
				}
				
			});
		},
		onShow() {},
		methods: {
			bindPickerChange(e){
				
				this.bankindex = e.detail.value
				this.addresinfo.bank_name = this.bankarray[e.detail.value]['bank_name']
			},
			regionchange(e) {
				const value = e.detail.value
				console.log(value[0].text + ',' + value[1].text + ',' + value[2].text);
				this.regiondata = value[0].text + ',' + value[1].text + ',' + value[2].text
			},
			CertType(e){
				if (e.detail.value == 1) {
					this.certCq = false;
					this.addresinfo.cert_validity_type = "1";
				} else {
					this.certCq = true;
					this.addresinfo.cert_validity_type = "0";
				}
			},
			radioCardType(e){
				if (e.detail.value == 1) {
					this.xinyongShow = true;
					this.card_type = "信用卡";
				} else {
					this.xinyongShow = false;
					this.card_type = "储蓄卡";
				}
			},
			// 信用卡有效期
			timeConfirm(e) {
				this.addresinfo.expiration = e.year + '/' + e.month
			},
			presentCode(data) {
				
					console.log("---");
				this.addresinfo.card_type = (this.card_type === '储蓄卡' ? '1' : '2')
				if (!this.addresinfo.name) {
					app.error("请输入您的姓名")
					return false
				}
				if (!this.addresinfo.telephone) {
					app.error("请输入您的手机号")
					return false
				}
				if (!this.addresinfo.cert_id) {
					app.error("请输入您的身份证号")
					return false
				}
				if (!this.addresinfo.card_number) {
					app.error("请输入您的银行卡号")
					return false
				}
				// if (!this.addresinfo.bank_name) {
				// 	this.$toast(this.$t('请输入您的所属银行'))
				// 	return false
				// }
				if (!this.addresinfo.address && !this.xinyongShow) {
					app.error("请选择您的开户地址")
					return false
				}
				// if (!this.addresinfo.branch_name) {
				// 	this.$toast(this.$t('请输入正确的支行名称'))
				// 	return false
				// }
				if (this.xinyongShow) {
					if (!this.addresinfo.vip_code) {
						app.error("请输入信用卡验证码")
						return false
					}
					if (!this.addresinfo.expiration) {
						app.error("请选择信用卡有效期")
						return false
					}
				}
				this.seconds = 59
				this.codeShow = true
				clearTimeout(this.timer)
				this.timer = setInterval(() => {
					this.seconds--
					if (this.seconds == 0) {
						this.codeShow = false
						return
					}
				}, 1000)
				app.post('ApiMy/cardBindApply', 
				{
					member_type:'2',
					info: this.addresinfo,
				}, 
				 (res) => {
				      app.showLoading(false);
					//app.error("test");return false;
					if(res.status == 0){
						app.error(res.msg);
						clearTimeout(this.timer)
						this.codeShow = false
					}else{
						
						//this.apply_id = res.data.id
						console.log("----绑卡返回---"+res.data.trans_id);
						this.addresinfo.trans_id = res.data.trans_id
						this.addresinfo.order_id = res.data.order_id
						this.addresinfo.order_date = res.data.order_date
					}
							
				})

				// this.$http.createUserName({
				// 	member_type: '2',
				// 	info:this.addresinfo
				// }).then(res => {
				// 	if (res.status == 200) {
				// 		this.seconds = 59
				// 		this.codeShow = true
				// 		clearTimeout(this.timer)
				// 		this.timer = setInterval(() => {
				// 			this.seconds--
				// 			if (this.seconds == 0) {
				// 				this.codeShow = false
				// 				return
				// 			}
				// 		}, 1000)
				// 		this.apply_id = res.data.id
						
				// 		this.addresinfo.trans_id = res.data.trans_id
				// 		this.addresinfo.order_id = res.data.order_id
				// 		this.addresinfo.order_date = res.data.order_date
				// 	}
				// })





			},
			codeChange(text) {
				this.tips = text;
			},
			end() {
				this.$u.toast('点击重新发送');
			},
			start() {
				this.$u.toast('验证码发送中');
			},
			Newbank() {
				this.addresinfo.card_type = (this.card_type === '储蓄卡' ? '1' : '2')
				if (!this.addresinfo.name) {
					app.error("请输入您的姓名")
					return false
				}
				if (!this.addresinfo.telephone) {
					app.error("请输入您的手机号")
					return false
				}
				if (!this.addresinfo.cert_id) {
					app.error("请输入您的身份证号")
					return false
				}
				if (!this.addresinfo.card_number) {
					app.error("请输入您的银行卡号")
					return false
				}
				// if (!this.addresinfo.bank_name) {
				// 	this.$toast(this.$t('请输入您的所属银行'))
				// 	return false
				// }
				if (!this.addresinfo.address && !this.xinyongShow) {
					app.error("请选择您的开户地址")
					return false
				}
				// if (!this.addresinfo.branch_name) {
				// 	this.$toast(this.$t('请输入正确的支行名称'))
				// 	return false
				// }
				if (this.xinyongShow) {
					if (!this.addresinfo.vip_code) {
						app.error("请输入信用卡验证码")
						return false
					}
					if (!this.addresinfo.expiration) {
						app.error("请选择信用卡有效期")
						return false
					}
				}

				if (this.status) return
				if (!this.addresinfo.code) {
					app.error("请输入验证码")
					return false
				}
				app.showLoading("请稍等...")
				app.post('ApiMy/checkdgmember',
				{
					sms_code: this.addresinfo.code,
					//apply_id: this.apply_id,
					info:this.addresinfo
				}, 
				function (res) {
				      app.showLoading(false);
					//app.error("test");return false;
					if(res.status == 0){
						app.error(res.msg);
					}else{
						app.success("绑卡成功")
						setTimeout(e=>{
							uni.navigateBack();
						},1000)
						
					}
							
				})
				// this.$http.addCard({
				// 	sms_code: this.addresinfo.code,
				// 	apply_id: this.apply_id,
				// 	info:this.addresinfo
				// }).then(res => {
				// 	if (res.status == 200) {
				// 		this.addresinfo.token_no = res.data.token_no
				// 		// 绑定成功
				// 		// 同步用户信息储蓄卡
				// 		//if (this.addresinfo.card_type == '1') {
				// 			this.getnav(
				// 				`/pagesC/wallet/myBankCard`
				// 			);
				// 		//}
				// 		// 信用卡
				// 		// if (this.addresinfo.card_type  == '2') {
				// 		// 	this.$http.addCardnew(this.addresinfo)
				// 		// }

				// 	} else {
				// 		return
				// 	}
				// })







			},

			onConfirm(e) {
				let arr = e.label.split('-')
				this.addresinfo.address = e.label
				this.addresinfo.province = arr[0]
				this.addresinfo.city = arr[1]
				this.addresinfo.area = arr[2]

			}


		},
		computed: {

		},
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f4f4f4;
	}
	.form_list radio-group {
		/* // border: 1px solid yellow; */
		display: flex;
		justify-content: space-around;
		margin-right: 2em;
		align-items: center;
	}
	.form_list radio-group radio {
		
		transform: scale(0.8);
		font-size: 20px;
		
	}
	input{
		text-align: right;
	}
	.index_class .edit-address .add_btn .cash_btn{
		border-radius: 10upx 10upx;
		box-shadow: 0 0;
	}
	// 编辑地址页面样式

.edit-address {
    /* // padding-top: 100rpx; */
    background-color: #f4f4f4;

    .wx {
        display: flex;
        justify-content: space-between;
        padding: 0 30rpx;
        height: 98rpx;
        align-items: center;
        margin-bottom: 20rpx;
        background-color: #fff;
    }

    .new_from {
        .form_list {
            display: flex;
            height: 98rpx;
            background-color: #fff;
            align-items: center;
            padding: 0 30rpx;
            border-bottom: 1rpx solid #f4f4f4;
			// justify-content: space-between;
            span {
                width: 30%;
                font-size: 30upx;
            }

            input,
            view {
                width: 70%;
            }
        }
    }

    .add_btn {
        padding: 0 30rpx;
        margin: 40rpx 0 20rpx 0;

        .cash_btn {
            width: 100%;
            height: 98rpx;
            line-height: 98rpx;
            text-align: center;
            color: #fff;
            background-color: red;
            border: none;
            border-radius: 49rpx;
            box-shadow: 0px 5px 10px #989898;

        }
    }

}
/deep/.selected-list{
	justify-content: flex-end;
}
</style>
